<template>
  <div class="document-library-page">
    <div class="page-header">
      <div class="header-content">
        <h2>文档库</h2>
        <p>供应链质量管理相关文档</p>
      </div>
      <a-button @click="goBack" class="back-button">
        <template #icon><icon-arrow-left /></template>
        返回
      </a-button>
    </div>
    
    <div class="content-container">
      <div class="document-list">
        <div 
          v-for="(doc, index) in documents" 
          :key="index"
          class="document-item"
          @click="openDocument(doc)"
        >
                     <div class="document-icon" :class="getIconClass(doc.type)">
             <icon-file-pdf v-if="doc.type === 'PDF'" />
             <icon-file-word v-else-if="doc.type === 'DOC'" />
             <icon-file-excel v-else-if="doc.type === 'XLSX'" />
             <icon-file-ppt v-else-if="doc.type === 'PPT' || doc.type === 'PPTX'" />
           </div>
          <div class="document-info">
            <div class="document-name">{{ doc.name }}</div>
                         <div class="document-meta">
               <span class="document-date">{{ doc.date }}</span>
               <span class="document-type" :class="getTypeClass(doc.type)">{{ doc.type }} 文档</span>
               <span class="document-size">{{ doc.size }}</span>
             </div>
          </div>
          <div class="document-actions">
            <a-button type="text" size="small">
              <template #icon><icon-download /></template>
            </a-button>
            <a-button type="text" size="small">
              <template #icon><icon-eye /></template>
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'

const router = useRouter()

// 文档数据
const documents = ref([
  {
    name: '第八章供应链质量管理.ppt',
    date: '2025/7/17 14:11',
    type: 'PPT',
    size: '777 KB',
    path: '/图谱库语料/第八章供应链质量管理.ppt'
  },
  {
    name: '供应链.doc',
    date: '2025/7/17 14:08',
    type: 'DOC',
    size: '173 KB',
    path: '/图谱库语料/供应链.doc'
  },
  {
    name: '供应链.ppt',
    date: '2025/7/17 14:07',
    type: 'PPT',
    size: '8,533 KB',
    path: '/图谱库语料/供应链.ppt'
  },
  {
    name: '供应链管理.doc',
    date: '2025/7/17 14:09',
    type: 'DOC',
    size: '59 KB',
    path: '/图谱库语料/供应链管理.doc'
  },
  {
    name: '供应链管理.ppt',
    date: '2025/7/17 14:09',
    type: 'PPT',
    size: '730 KB',
    path: '/图谱库语料/供应链管理.ppt'
  },
  {
    name: '供应链管理基础知识.ppt',
    date: '2025/7/17 14:05',
    type: 'PPT',
    size: '6,874 KB',
    path: '/图谱库语料/供应链管理基础知识.ppt'
  },
  {
    name: '供应链基础业务流程知识学习资料.doc',
    date: '2025/7/17 14:07',
    type: 'DOC',
    size: '166 KB',
    path: '/图谱库语料/供应链基础业务流程知识学习资料.doc'
  },
  {
    name: '供应链与供应链管理.pptx',
    date: '2025/7/17 14:07',
    type: 'PPTX',
    size: '841 KB',
    path: '/图谱库语料/供应链与供应链管理.pptx'
  },
  {
    name: '供应链战略及供应链的构建.ppt',
    date: '2025/7/17 14:06',
    type: 'PPT',
    size: '441 KB',
    path: '/图谱库语料/供应链战略及供应链的构建.ppt'
  },
  {
    name: '供应商质量问题数据包.xlsx',
    date: '2025/7/17 17:10',
    type: 'XLSX',
    size: '3,010 KB',
    path: '/图谱库语料/供应商质量问题数据包.xlsx'
  },
  {
    name: '基于知识图谱的国内供应链管理研究分析.pdf',
    date: '2025/7/17 14:04',
    type: 'PDF',
    size: '440 KB',
    path: '/图谱库语料/基于知识图谱的国内供应链管理研究分析.pdf'
  },
  {
    name: '汽车零部件行业供应链质量管理与探讨.pdf',
    date: '2025/7/17 14:11',
    type: 'PDF',
    size: '2,228 KB',
    path: '/图谱库语料/汽车零部件行业供应链质量管理与探讨——基于A公司在供应链质量管理的实践.pdf'
  },
  {
    name: '浅论供应链质量管理.doc',
    date: '2025/7/17 14:10',
    type: 'DOC',
    size: '35 KB',
    path: '/图谱库语料/浅论供应链质量管理.doc'
  },
  {
    name: '知识共享-供应链动态能力与供应链绩效的关系研究.pdf',
    date: '2025/7/17 14:06',
    type: 'PDF',
    size: '251 KB',
    path: '/图谱库语料/知识共享-供应链动态能力与供应链绩效的关系研究.pdf'
  }
])

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 获取图标样式类
const getIconClass = (type) => {
  switch (type) {
    case 'PDF':
      return 'icon-pdf'
    case 'DOC':
      return 'icon-word'
    case 'XLSX':
      return 'icon-excel'
    case 'PPT':
    case 'PPTX':
      return 'icon-ppt'
    default:
      return 'icon-default'
  }
}

// 获取文档类型样式类
const getTypeClass = (type) => {
  switch (type) {
    case 'PDF':
      return 'pdf'
    case 'DOC':
      return 'word'
    case 'XLSX':
      return 'excel'
    case 'PPT':
    case 'PPTX':
      return 'ppt'
    default:
      return ''
  }
}

// 打开文档
const openDocument = (doc) => {
  try {
    // 构建完整的文件路径
    const fullPath = `/public${doc.path}`
    window.open(fullPath, '_blank')
    Message.success(`正在打开 ${doc.name}`)
  } catch (error) {
    console.error('打开文档失败:', error)
    Message.error('打开文档失败，请检查文件是否存在')
  }
}
</script>

<style scoped>
.document-library-page {
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-content h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #000000;
}

.header-content p {
  margin: 0;
  color: #666;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.content-container {
  background: white;
  padding: 24px;
  border-radius: 8px;
  min-height: 400px;
}

.document-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.document-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.document-item:hover {
  background: #f8f9fa;
  border-color: #d9d9d9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.document-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 16px;
  color: white;
  transition: all 0.3s ease;
}

.document-icon.icon-pdf {
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
}

.document-icon.icon-word {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.document-icon.icon-excel {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
}

.document-icon.icon-ppt {
  background: linear-gradient(135deg, #fa8c16 0%, #ffc53d 100%);
  box-shadow: 0 2px 8px rgba(250, 140, 22, 0.3);
}

.document-icon.icon-default {
  background: linear-gradient(135deg, #8c8c8c 0%, #bfbfbf 100%);
  box-shadow: 0 2px 8px rgba(140, 140, 140, 0.3);
}

.document-item:hover .document-icon {
  transform: scale(1.1);
}

.document-info {
  flex: 1;
}

.document-name {
  font-size: 16px;
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 4px;
  line-height: 1.4;
}

.document-meta {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #86909c;
}

.document-date {
  color: #4e5969;
}

.document-type {
  font-weight: 500;
}

.document-type.pdf {
  color: #ff4d4f;
}

.document-type.word {
  color: #1890ff;
}

.document-type.excel {
  color: #52c41a;
}

.document-type.ppt {
  color: #fa8c16;
}

.document-size {
  color: #52c41a;
  font-weight: 500;
}

.document-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.document-item:hover .document-actions {
  opacity: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .document-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .document-icon {
    margin-right: 0;
  }
  
  .document-meta {
    flex-direction: column;
    gap: 4px;
  }
  
  .document-actions {
    align-self: flex-end;
    opacity: 1;
  }
}
</style>
